Option 1: using URL parameters

              import { useRouter } from 'next/router';

function Product() {
  const router = useRouter();
  const { id } = router.query;

  return <h1>Product: {id}</h1>;
}

function Home() {
  return (
    <>
      <Link href="/product?id=1">
        <a>Product 1</a>
      </Link>
      <Link href="/product?id=2">
        <a>Product 2</a>
      </Link>
    </>
  );
}

Option 2: pass object data

import Link from 'next/link';

function MyComponent() {
  return (
    <Link
      href={ {
        pathname: '/user',
        query: { name: 'john', age: '30' },
      }}
    >
      <a>Go to User</a>
    </Link>
  );
}

import { useRouter } from 'next/router';

function User() {
  const router = useRouter();
  const { name, age } = router.query;
  return (
    <div>
      Name: {name} <br />
      Age: {age}
    </div>
  );
}

option 3: without query string

1. create a component /components/AppContext.tsx

import { createContext } from "react";

const AppContext = createContext();

export default AppContext;

2. /pages/_app.tsx

import '../styles/globals.css'
import { useState } from 'react';
import AppContext from '../components/AppContext';

function MyApp({ Component, pageProps }) {
  const [session, setSession] = useState()

  return (<AppContext.Provider value={ { session, setSession }}><Component {...pageProps} /></AppContext.Provider>)
}
export default MyApp

3. Share state between pages

page1.tsx

import AppContext from "../components/AppContext"
import { useContext, useState } from "react"
import { useRouter } from "next/router";


export default function Page1() {

const [value, setValue] = useState()
const context = useContext(AppContext)
const router = useRouter()

return (
    <div>

    <TextField
    id="standard-helperText"
    label="input"
    onChange={(event) => setValue(event.target.value)}
/>

<Button size='large' className='text-white bg-blue-500 m-5'
    onClick={() => {
        context.setSession(value)
        router.push('/page2')
    }}>Next</Button>  

   </div>
)

}

page2.tsx

import { useContext } from "react"
import AppContext from "../components/AppContext"

export default function Page2() {

const context = useContext(AppContext)
    return (<div>{context.session}</div>)
}

Output

page 1

page2